<template>
  <div class="myInput">
    <!-- <div class="search">搜索</div> -->
    <el-autocomplete class="inline-input" v-model="state" :clearable="true" :fetch-suggestions="querySearch"
      :trigger-on-focus="false" :popper-append-to-body="isPa" @select="handleSelect" @focus="focusInput"
      @blur="querySearch" @clear="clearInput" :debounce="500">
      <template v-for="item in restaurants">
        <div v-if="lastRes.length > 0" :key="item.value" class="myOption">
          <span class="flex-center">{{item.ontology_name}}</span>
          <p>{{item.value}}</p>
        </div>
      </template>
    </el-autocomplete>
    <div class="join" @click="join()">加入</div>

    <!-- <el-autocomplete class="inline-explain" v-model="state" :clearable="true" :fetch-suggestions="querySearch"
      :trigger-on-focus="false" :popper-append-to-body="isPa" @select="handleSelect" @focus="focusInput"
      @blur="querySearch" @clear="clearInput" :debounce="500">
      <template v-for="item in restaurants">
        <div v-if="lastRes.length > 0" :key="item.value" class="myOption" @click="selectedValue">
          <span class="flex-center">{{item.ontology_name}}</span>
          <p>{{item.value}}</p>
        </div>
      </template>
    </el-autocomplete>
    <div class="explain" @click="join()">分析</div> -->
  </div>
</template>

<script>
  // import {
  //   IconPark
  // } from '@icon-park/vue/es/all';
  // import {
  //   getAnalysisSearch
  // } from "@/api/atlas-analyse"
  export default {
    name: "my-input",
    // components: {
    //   IconPark
    // },
    props: {
      isPa: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        count: true,
        initDom: [],
        restaurants: [],
        state: null,
        lastRes: [],
        dataList: [],
        results: [],
        entityIds: ''
        // cbFun: null,
      };
    },
    mounted() {},
    watch: {
      state(newVal, oldVal) {
        if (newVal) {
          this.focusInput();
          // this.querySearch(newVal, this.cbFun);
        }
      },
    },
    methods: {
      // 点击待选项
      selectedValue(e) {
        this.state = e.target.innerText;
      },
      // 输入框获得焦点
      focusInput() {
        const inner = document.querySelector(".el-input__inner");
        inner.style.backgroundImage = "none";
      },
      // 输入框失去焦点
      blurInput(e) {
        if (!this.state) {
          // const img = require("../../../../assets/img/search.png");
          const inner = document.querySelector(".el-input__inner");
          inner.style['background-image'] = `url(${img})`;
          inner.style['background-size'] = "16px";
          inner.style['background-repeat'] = "no-repeat";
          inner.style['background-position'] = "16px";
        }
      },
      // 清空输入框
      clearInput(e) {
        this.state = null;
        this.blurInput();
      },
      async querySearch(queryString, cb) {
        // this.cbFun = cb;
        // const res = await getAnalysisSearch({
        //   keywords: queryString
        // });
        let res = await this.$axios.get(this.$api.knowledgeMap.getSearch,{
                params: {
                    keywords: queryString
                }
        });
            // if (res.data && res.data.code === 200) {
            //      this.restaurants = res.data.data;
            //     console.log("restaurants===",this.restaurants);
            // }
        var results = [];
        this.initDom = document.getElementsByClassName("el-autocomplete-suggestion__wrap");
        // 承载建议的 dom
        let suggestionList = document.querySelector(".el-autocomplete-suggestion__list");
        // 创建一个承载 暂无搜索结果 的 dom
        let spanDom = document.createElement("span");
        if (this.initDom[0].children.length == 1) {
          spanDom.innerHTML = "暂无搜索结果";
          this.initDom[0].appendChild(spanDom);
        }
        if (res.data.data === "暂无搜索结果") {
          results = [{
            "value": "",
          }];
          suggestionList.style.display = "none";
          this.initDom[0].getElementsByTagName("span")[0].style.display = "block";
          cb(results);
          return;
        } else {
          // 每次查询过后需要将待选项列表置空
          this.restaurants = [];
          this.initDom[0].getElementsByTagName("span")[0].style.display = "none";
          suggestionList.style.display = "block";
          for (let i = 0; i < res.data.data.length; i++) {
            this.restaurants.push({
              'id': res.data.data[i].id,
              'value': res.data.data[i].name,
              'ontology_name': res.data.data[i].ontology_name,
              'project_name': res.data.data[i].project_name,
            })
          }
          var restaurants = this.restaurants;
          results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          this.lastRes = JSON.parse(JSON.stringify(results));
          cb(results);
        }
      },
      createFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      // 点击待选项时触发的方法
      // handleSelect(params) {
      //   console.log("params", params);
      //   // 判断已添加的数据中是否包含当前点击的实体对象
      //   if (this.$store.state.dataList.every(item => item.id !== params.id)) {
      //     this.$store.commit("add_dataList", params);
      //   } else {
      //     this.$message({
      //       type: "warning",
      //       message: "该实体已添加"
      //     });
      //   }
      // }
      //点击待选项时触发的方法
      handleSelect(params) {
        this.entityIds = params.id;
        console.log("params", params);
        // 判断已添加的数据中是否包含当前点击的实体对象
        // if (this.$store.state.dataList.every(item => item.id !== params.id)) {
             this.$store.commit("add_dataList", params);
        // } else {
          // this.$message({
            // type: "warning",
            // message: "该实体已添加"
          // });
        // }
      },
      async join() {
        // let data = {
        //   entity_id: "ab23e81d-861d-4032-9f50-287529409de5",
        //   id: "14444",
        //   label: "111"
        // }
        // this.$emit('changeByNode',data);
          let res = await this.$axios.get(this.$api.knowledgeMap.getProfilers,{
              params: {
                  entityIds: this.entityIds
              }
          });
          if (res.data && res.data.code === 200) {
              EventBus.$emit('selectKnowledge', this.selectKnowledge);   
          }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .myInput {
    width:338px;
    .join{
      width:50px;
      height:40px;
      line-height:40px;
      text-align: center;
      background-color: #008FE0;
      color: #ffffff;
      float:right;
    }
    .join:hover{
      cursor: pointer;
    }
    .inline-explain{
      margin-top:20px;
    }
    .explain{
      width:50px;
      height:40px;
      line-height:40px;
      text-align: center;
      background-color: #008FE0;
      color: #ffffff;
      float:right;
      margin-top:20px;
    }
    .el-autocomplete {
      width: 288px;
      height: 40px;

      /deep/ .el-autocomplete-suggestion__list li {
        padding: 0 5px;
      }

      // /deep/ .el-autocomplete-suggestion__list li:first-of-type {
      //   color: @tab-active-font-color;
      // }
    
      .myOption {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;

        span:first-of-type {
          // min-width: 40px;
          height: 24px;
          font-size: 12px;
          border-radius: 8px;
          // background: @tab-bgc-color;

          max-width: 74px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        span:last-of-type {
          // min-width: 87px;
          // height: 19px;
          width:50px;
          font-size: 12px;
          border-radius: 8px;
          // background: @tab-bgc-color;

          max-width: 74px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        p {
          flex-grow: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-left: 10px;
        }
      }
      .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
        background:#f5f5f5;
      }

      

      .myOption2 {
        color: #bbb;
        pointer-events: none;
      }

      /deep/ .el-input__inner {
        outline: none;
        border-radius: 2px;
        // background-image: url("../../assets/img/search.png");
        background-repeat: no-repeat;
        background-size: 16px;
        position: relative;
        background-position: 16px;
        // background-color: @tab-bgc-color;

        &:focus {
          // border-color: @head-bgc-1;
        }
      }
    }
  }
</style>